<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>轮询点击饼图</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script>
      const myChart = echarts.init(document.getElementById("main"));

      const option = {
        series: [
          {
            type: "pie",
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
            selectedMode: "single",
            label: {
              formatter: "{b}: {c}",
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      let currentIndex = -1;
      let intervalId = null;
      let isMouseOver = false;

      function autoSelect() {
        const data = option.series[0].data;
        if (data && data.length > 0) {
          currentIndex = (currentIndex + 1) % data.length;
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
          myChart.dispatchAction({
            type: "select",
            seriesIndex: 0,
            dataIndex: currentIndex,
          });
        }
      }

      function startAutoSelect() {
        intervalId = setInterval(autoSelect, 3000);
      }

      function stopAutoSelect() {
        clearInterval(intervalId);
        intervalId = null;
      }

      myChart.on("mouseover", function () {
        isMouseOver = true;
        stopAutoSelect();
      });

      myChart.on("mouseout", function () {
        isMouseOver = false;
        startAutoSelect();
      });

      startAutoSelect();
      myChart.setOption(option);
    </script>
  </body>
</html>
